<template>
  <div class="header-container flex-box">
    <div class="header-left flex-box">
      <el-icon class="icon" size="20" @click="handleCollapse"><fold /></el-icon>
      <!-- closable:控制标签是否显示 关闭按钮（×） -->
      <el-tag
        class="tags"
        v-for="(tag, index) in tags"
        :key="tag.meta.name"
        :closable="isClosable(tag)"
        :effect="route.meta.name === tag.meta.name ? 'dark' : 'plain'"
        @click="handleMenu(tag)"
        @close="handleClose(tag, index)"
      >
        {{ tag.meta.name }}
      </el-tag>
    </div>
    <div class="header-right">
      <!--command： 可以轻松地为每个菜单项定义唯一的标识符 -->
      <el-dropdown @command="handleClick">
        <div class="el-dropdown-link flex-box">
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <p class="user-name">admin</p>
        </div>
        <template #dropdown>
          <el-dropdown-item command="cancel">退出</el-dropdown-item>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { computed,onMounted } from "vue";
import { useAllMenuDataStore } from "@/store/menu.js";
import { useRouter, useRoute } from "vue-router";
// - useRouter ：用于控制路由跳转。
// - useRoute ：用于获取当前路由信息。
const router = useRouter();
const route = useRoute();
const menuStore = useAllMenuDataStore();
const tags = computed(() => menuStore.state.tags);
console.log("////",tags);

// 获取默认选中的菜单项（第一个子菜单或第一项本身）
const getDefaultMenu = () => {
  const firstMenu = menuStore.state.menuList[0];
  if (firstMenu.children && firstMenu.children.length > 0) {
    return firstMenu.children[0]; // 返回第一个子菜单
  }
  return firstMenu; // 返回第一项本身
};

// 判断标签是否可关闭
const isClosable  = (tag) => {
  const defaultMenu = getDefaultMenu();
  return tag.meta.name !== defaultMenu.meta?.name;
};

const handleClick = (command) => {
  if (command === "cancel") {
    localStorage.removeItem("pz_token");
    localStorage.removeItem("pz_userInfo");
    localStorage.removeItem("all-menu-data");
    window.location.href = window.location.origin;
  }
};
const handleCollapse = () => {
  menuStore.state.isCollapse = !menuStore.state.isCollapse;
};
const handleMenu = (tag) => {
  if(tag.name=='admin'){
    router.push('/admin');
    menuStore.selectMenu(tag);
    return ;
  }
  router.push(tag.path);
  // 更新状态管理仓库中的 tags 和 currentMenu 状态，以此确保应用状态的一致性。
  menuStore.selectMenu(tag);
};
const handleClose = (tag, index) => {
  // 通过 Pinia 管理，从 tags 数组中移除当前关闭的标签
  menuStore.undateTags(tag);
  // 如果关闭的标签不是当前路由对应的标签，直接返回，无需跳转
  if (tag.path !== route.meta.path) return;
  // 如果关闭的标签是最后一个标签，跳转到前一个标签对应的页面
  // 跳转到前一个标签（index - 1）
  // 例如：有标签 [A,B,C]，关闭 C 时跳转到 B
  if (index === menuStore.state.tags.length) {
    menuStore.selectMenu(tags.value[index - 1]);
    router.push(tags.value[index - 1].path);
  } else {
    // 关闭的是中间标签
    // 跳转到下一个标签（保持当前 index）
    // 例如：有标签 [A,B,C]，关闭 B 时跳转到 C（因为数组已更新，原C现在位于B的位置）
    menuStore.selectMenu(tags.value[index]);
    router.push(tags.value[index].path);
  }
};
</script>

<style scoped lang="less">
.flex-box {
  display: flex;
  align-items: center;
}
.header-container {
  justify-content: space-between;
  height: 100%;
  background-color: #fff;
  padding-right: 25px;
  .header-left {
    height: 100%;
    .icon {
      width: 45px;
      height: 100%;
    }
    .icon:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
    .tags {
      margin-left: 10px;
    }
  }
  .header-right {
    .user-name {
      margin-left: 10px;
    }
  }
}
</style>
